<template>
	<div>
		<div style='background:#fff;'>
			<Tabs value="" class='coupon-tab' @on-click='changeTab'>
		        <TabPane label="全部" name="2"></TabPane>
		        <TabPane label="未使用" name="0"></TabPane>
		        <TabPane label="已使用" name="1"></TabPane>
		        <TabPane label="已过期" name="-1"></TabPane>
		    </Tabs>
		</div>
		<div class='coupon'>
			<div class='coupons' v-if='coupon.length'>
				<div class='coupon-wrap' v-for='item in coupon' :key='item'>
					<img v-if='item.status == "-1"' src="../../../images/coupon1.png">
					<img v-else src="../../../images/coupon.png">
					<div class='coupon-time' :class='{"coupon-time-no":item.status == "-1"}'>{{ item.ended_at | moment("YYYY.MM.DD") }} 到期</div>
					<div class='coupon-price'>{{item.coupon.price}}</div>
					<div v-show='item.status=="1"' class='coupon-btn'>已使用</div>
				</div>
				<div style='width: 242px;margin-right: 20px' v-for='item in 6'></div>
			</div>
			<Row class='coupon-no' v-else>
	            <Row>
	                <Col :span="8">&nbsp;</Col>
	                <Col :span="8">
	                	<Icon type="android-notifications-none" color="#39f" size="93"></Icon>
	                </Col>
	            </Row>
	            <Row style="margin-top: 12px;">
	                <Col :span="8">&nbsp;</Col>
	                <Col :span="8">暂无优惠券</Col>
	            </Row>
	        </Row>
		</div>
	</div>
</template>
<script type="text/javascript">
	import moment from 'moment';
	export default{
		data(){
			return{
				coupon:[]
			}
		},
		created(){
			this.getData();
		},
		methods:{
			getData(){
				this.fetch('/home/myCoupons').then(res=>{
					if(res&&res.data.data){
						this.coupon = res.data.data;
					}
				})
			},
			changeTab(name){
				if(name == 2){
					this.getData();
					return
				}
				this.fetch('/home/myCoupons?status='+name).then(res=>{
					if(res&&res.data.data){
						this.coupon = res.data.data;
					}
				})
			}
			
		}
		
	}
</script>
<style>
	.ivu-tabs-nav .ivu-tabs-tab-active{
		color:#06A0FD!important;
	}
	.ivu-tabs-ink-bar{
		background-color: #06A0FD!important;
	}
	.coupon-tab .ivu-tabs-nav-wrap{
		padding:8px 70px 0;
	}
	.coupon-tab .ivu-tabs-bar{
		margin-bottom: 0;
		border: 0!important;;
	}
	.coupon{
		padding:50px 30px 18px 50px;
		background: #fff;
		margin-top:16px;
	}
	.coupons{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.coupon-wrap{
		/*width: 236px;*/
		position: relative;
		margin-right: 20px;
		margin-bottom: 32px;
		font-size: 0
	}
	.coupon-price{
		min-width: 110px;
		font-size: 65px;
		color: #fff;
		position: absolute;
		top:12px;
		left:67px;
		text-align: center;
	}
	.coupon-btn{
		width:80px;
		height: 24px;
		line-height: 24px;
		border-radius: 12px;
		border:1px solid rgba(255,255,255,0.8);
		color:rgba(255,255,255,0.8);
		font-size:12px;
		position: absolute;
		bottom:9px;
		left: 50%;
		margin-left: -40px;
		text-align:center;
		cursor:pointer;
	}
	.coupon-btn:hover{
		border:1px solid rgba(255,255,255,1);
		color:rgba(255,255,255,1);
	}
	.coupon-time{
		position: absolute;
		right:16px;
		top:10px;
		font-size:10px;
		color:#fde9bf
	}
	.coupon-time-no{
		color:#747474;
	}
	.coupon-no{
		padding-bottom: 32px;
		text-align: center;
		font-size: 16px;
	}
</style>
